<template>
  <div class="every-college">
    <h3>学校八大院系</h3>
    <table border="1" cellspacing="0" v-if="status">
      <tr>
        <td @click="goToCollege(college[0].college)">
          {{ college[0].college }}
        </td>
        <td @click="goToCollege(college[1].college)">
          {{ college[1].college }}
        </td>
      </tr>
      <tr>
        <td @click="goToCollege(college[2].college)">
          {{ college[2].college }}
        </td>
        <td @click="goToCollege(college[3].college)">
          {{ college[3].college }}
        </td>
      </tr>
      <tr>
        <td @click="goToCollege(college[4].college)">
          {{ college[4].college }}
        </td>
        <td @click="goToCollege(college[5].college)">
          {{ college[5].college }}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
export default {
  name: "CollegeTable",
  data() {
    return {
      college: [],
      status: false,
      collegeName: "",
    };
  },
  methods: {
    goToCollege(collegeName) {
      // 进行路由跳转，这里假设使用Vue Router
      this.$router.push({
        // name: "department/level",
        params: { college: collegeName },
        path: "/department/level",
      });
      this.collegeName = collegeName;
      // 在3秒后执行某个函数
      setTimeout(function () {
      pubsub.publish("sendCollegeName", collegeName);
      }, 0);

    },
    getColleges() {
      this.$http({
        url: this.$http.adornUrl(`/chaoxing/college/list`),
        method: "get",
      }).then((response) => {
        this.college = response.data.college;
        this.status = true;
      });
    },
  },
  created() {
    this.getColleges();
  },
  beforeDestroy() {},
};
</script>

<style scoped>
.every-college {
  width: 100%;
  height: 100%;
  /* background-color: blanchedalmond; */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
table {
  width: 100%;
  height: 100%;
  border: 1px solid orange;
}
tr {
  height: 15px;
  border: 1px solid orange;
}
</style>
